<template>
  <div class="cascade"  >
    <div class="one" @click="isTwo">
      <img class="clear" v-if="isClear" src="../assets/clear.png" alt="" @click="clearMsg">
      <img :class="!isTwoVisible ? '':'change'" src="../assets/下拉.png" v-else alt="">
      <span v-if="isMsgVisible">{{ placeholedr }}</span>
      <span v-else-if="showAlllevels && showFourList">{{ twoName  }} / {{ threeName }} / {{ fourName }}</span>
      <span v-else-if="showAlllevels && !showFourList">{{ twoName  }} / {{ threeName }}</span>
      <span v-else-if="!showAlllevels && !showFourList">{{ this.threeName }}</span>
      <span v-else>{{ this.fourName }}</span>
    </div>
    <div class="allBox">
      <div class="two" v-show="isTwoVisible">
        <ul>
          <li v-for="(list, index) in lists" :key="index" @click="isthree(index, list.name)">
            <span :class="active1 === index ? 'blue': ''">{{ list.name }}</span>
            <img src="../assets/blue.png" alt="" v-if="active1 === index">
            <img src="../assets/箭头.png" alt="" v-else>
          </li>
        </ul>
      </div>
      <div class="two three" v-if="isThreeVisible">
        <ul>
           <li v-for="(list, index) in lists[active1].children" :key="index" @click="isfour(index, list.name, list)">
            <span :class="active2 === index ? 'blue': ''">{{ list.name }}</span>
            <img src="../assets/blue.png" alt="" v-if="active2 === index && list.children">
            <span v-else-if="!list.children"></span>
            <img src="../assets/箭头.png" alt="" v-else>
          </li>
        </ul>
      </div>
      <div class="two three four" v-if="isFourVisible && showFourList">
         <ul>
           <li v-for="(list, index) in lists[active1].children[active2].children" :key="index" @click="getmsg(index,list.name)">
            <span :class="active3 === index ? 'blue': ''">{{ list.name }}</span>
            <!-- <img src="../assets/箭头.png" alt=""> -->
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['lists', 'parentIsClear', 'placeholedr', 'show_all_levels'],
  data () {
    return {
      isClear: false,
      isTwoVisible: false,
      isThreeVisible: false,
      isFourVisible: false,
      isMsgVisible: true,
      active1: 100,
      active2: 100,
      active3: 100,
      // 菜单集合
      arr: '',
      msg: '',
      // 一级菜单名
      twoName: '',
      // 二级菜单名
      threeName: '',
      // 三级菜单名
      fourName: '',
      // 父级传过来的可以清空按钮
      sonIsClear: false,
      // 显示最后一级还是显示全部
      showAlllevels: false,
      showFourList: true
    }
  },
  created () {
    // console.log(this.parentIsClear)
    // console.log(typeof this.parentIsClear)
    // eslint-disable-next-line
    console.log(this.show_all_levels)
    this.isparentIsClear()
    this.isShowAlllevels()
  },
  methods: {
    // 判断父组件是否传 parentIsClear， 进行可清空操作
    // 父组件如果传了 parentIsClear，就将 sonIsClear 变为 true 在 getmsg 中判断
    isparentIsClear () {
      if (this.parentIsClear === '' || this.parentIsClear) {
        this.sonIsClear = true
        // console.log(this.sonIsClear)
      }
      if (this.parentIsClear === false) {
        this.sonIsClear = false
        console.log(this.sonIsClear)
      }
    },
    // 判断传过来的 show-all-levels, 进行显示一级还是三级的判断
    // 如果为 true 显示全部文本，反之只显示三级文本
    isShowAlllevels () {
      // eslint-disable-next-line
      if (this.show_all_levels === '' || this.show_all_levels) {
        this.showAlllevels = true
        console.log(111)
      }
      // eslint-disable-next-line
      if (this.show_all_levels === false) {
        this.showAlllevels = false
        console.log(222)
      }
    },
    // 显示一级菜单
    isTwo () {
      this.active1 = 100
      this.active2 = 100
      this.active3 = 100
      this.isTwoVisible = !this.isTwoVisible
      if (this.isThreeVisible) {
        this.isThreeVisible = false
        this.isTwoVisible = false
        this.isFourVisible = false
      }
    },
    // 显示二级
    isthree (index, twoName) {
      this.active2 = 100
      this.active3 = 100
      this.twoName = twoName
      this.active1 = index
      this.isThreeVisible = true
      this.isFourVisible = false
    },
    // 显示三级
    isfour (index, threeName, list) {
      this.active3 = 100
      this.active2 = index
      this.threeName = threeName
      this.isFourVisible = true
      if (!list.children) {
        this.showFourList = false
        // 显示信息框 隐藏请选择
        this.isMsgVisible = false
        // 所有下拉菜单隐藏
        this.isThreeVisible = false
        this.isTwoVisible = false
        this.isFourVisible = false
        if (this.sonIsClear) {
          this.isClear = true
        }
        this.getArr()
        // $emit 给父级一个change 事件 参数为当前选择所有参数的索引值
        if (this.showAlllevels) {
          const text = `${this.twoName} ${this.threeName}`
          this.$emit('cascadeMsg', text)
        } else if (this.showFourList) {
          const text = this.fourName
          this.$emit('cascadeMsg', text)
        } else {
          const text = this.threeName
          this.$emit('cascadeMsg', text)
        }
      } else {
        this.showFourList = true
      }
    },
    // 最后获取数据
    getmsg (index, fourName) {
      this.active3 = index
      this.fourName = fourName
      // 显示信息框 隐藏请选择
      this.isMsgVisible = false
      // 所有下拉菜单隐藏
      this.isThreeVisible = false
      this.isTwoVisible = false
      this.isFourVisible = false
      if (this.sonIsClear) {
        this.isClear = true
      }
      this.getArr()
      // $emit 给父级一个change 事件 参数为当前选择所有参数的索引值
      if (this.showAlllevels) {
        const text = `${this.twoName} ${this.threeName} ${this.fourName}`
        this.$emit('cascadeMsg', text)
      } else {
        const text = this.fourName
        this.$emit('cascadeMsg', text)
      }
    },
    // 得到当前选择的数据
    getArr () {
      if (this.showFourList) {
        this.arr = [this.active1, this.active2, this.active3]
        console.log(this.arr, '子组件的值')
        // $emit 给父级一个change 事件 参数为当前选择所有参数的索引值
        this.$emit('change', this.arr)
      } else {
        this.arr = [this.active1, this.active2]
        console.log(this.arr, '子组件的值')
        // $emit 给父级一个change 事件 参数为当前选择所有参数的索引值
        this.$emit('change', this.arr)
      }
    },
    // 点击清除按钮清空文本框
    clearMsg (e) {
      this.isMsgVisible = true
      // this.sonIsClear = false
      this.fourName = ''
      this.threeName = ''
      this.twoName = ''
      this.isClear = false
      // 阻止冒泡
      e.stopPropagation()
    }
  },
  watch: {
    active (oldActive, newActive) {
      if (oldActive === newActive) {
        this.isThreeVisible = !this.isThreeVisible
      } else {
        this.isThreeVisible = true
      }
    }
  }
}
</script>

<style lang="scss" scopde>
.cascade {
  margin-left: 20px;
  font-size: 14px;
}
.one {
  cursor: pointer;
  width: 220px;
  height: 40px;
  background: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  position: relative;
  box-sizing: border-box;
  .change {
    transform: rotate(180deg);
    transition: all .5s;
  }
  .clear {
    width: 15px;
    height: 15px;
    z-index: 10;
  }
  img {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 10px;
    transition: all .5s;
  }
  span {
    width: 220px;
    height: 40px;
    position: absolute;
    line-height: 40px;
    left: 10px;
    color: #606266;
  }
}
.two {
  overflow: auto;
  box-sizing: border-box;
  width: 220px;
  height: 200px;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  color: #606266;
  margin-top: 5px;
  float: left;
  position: relative;
  img {
    position: absolute;
    top: 0;
  }
  ul {
    list-style: none;
    padding: 0 5px;
    overflow: hidden;
    li {
      margin: 15px 10px;
      cursor: pointer;
      padding: 0 10px;
      // background: red;
      position: relative;
      span {
        font-size: 15px;
      }
      .blue {
        color: skyblue;
      }
      img {
        width: 18px;
        float: right;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: 0 auto;
      }
    }
  }
}
.three {
  float: left;
  border-left: 1px solid #e4e7ed;
  border-radius: 0;
}
.four {
  float: left;
  border-left: 1px solid #e4e7ed;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.allBox {
  width: 670px;
}
</style>
